<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style type="text/css">
        .lottery-wrapper{ width: 60%; float:left}
        .showlottery-list{border:1px solid red; float:right; width: 35%;}
        .vetically{justify-content:center;align-items:center;display:-webkit-flex;}
        .lottery-con{position: absolute;width: 100%;height: 100%;background: url(images/firstp_bg.jpg) no-repeat left top / 100% 100%;overflow: hidden;}
        .lottery-grade{font-size:98px;color: #ffe9af;text-align: center;margin: 60px auto 0;}
        .lottery-list{width:55%;height:230px;margin: 20px auto 55px;text-align: center;overflow: hidden;}
        .lottery-list ul{width:100%;font-size:0;}
        .lottery-list li{display:inline-block;font-size:45px;color:#f1bf90;text-align: center;width:20%;line-height:100px;font-family:Arial;}
        .start{width: 250px;height: 90px;margin:0 auto;cursor:pointer;}
        .lottery-set{position: absolute;right: 60px;bottom:140px;font-size: 16px;color: #f7f3e8;line-height: 30px;}
        .lottery-set li{display: inline-block;margin-left: 20px;}
        .set-grade select,.set-people input, .set_money input{background: #fff;width:110px;height:36px;border:1px solid #8f0000;margin-left: .1rem;color: #000;padding-left:10px;}
    </style>

</head>
<body>
    <div class="lottery-con">
        <p class="lottery-grade"><span>开始抽奖</span></p>
        <div class="lottery-list vetically">
            <ul>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
            </ul>
        </div>
        <p class="start"><img src="images/prize_start.png" alt=""/></p>
            <ul class="lottery-set">
                <li class="set-grade">奖项
                    <select id="set-grade">
                        <option>选择奖项</option>
                        <option value="特等奖" sid="special">特等奖</option>
                        <option value="一等奖" sid="first">一等奖</option>
                        <option value="二等奖" sid="second">二等奖</option>
                        <option value="三等奖" sid="third">三等奖</option>
                    </select>
                </li>
                <li class="set-people">人数<input type="tel" placeholder="输入中奖人数" id="prizeCount" /></li>
            </ul>
    </div>
    <input type="hidden" value="0" id="prize_btn" />
    <script src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        var myNumber;
        var arr = [];
        var lootery = [302610,210022,159862,158602,145635,856997,586223,546221,145213,987451,251364];
        /*随机所有的code并且不重复*/
        /*function showRandomNum(num) {
            var li = '';
            for(var i = 0; i < lootery.length; i++){
                arr[i] = i;
            }
            arr.sort(function(){
                return 0.5 - Math.random();
            });

            for(var i = 0; i < num; i++){
                var index = arr[i];
                li += '<li>'+lootery[index]+'</li>';
            }
            $(".lottery-list ul").html(li);
        }*/

        function showRandomNum(num) {
            $.ajax({
                url : "/awards",
                type : "post",
                data : {
                    awards:$.trim($("#set-grade").val()),
                    personCount:$.trim($("#prizeCount").val())
                },
                success : function(result) {
                    console.log(result.data);
                    if(result.result == "success"){
                        data = result.data; //赋值给全局变量
                        //$("#tbodyId").html("");
                        $(".lottery-list ul").html("");
                        let str = '';
                        $.each(result.data , function (index,e){
                            /*str +=  '<tr>'+
                                '<td>'+ e.awards + '</td>'+
                                '<td>'+ e.userName + '</td>'+
                                '</tr>';*/
                            str += '<li>'+ e.userName + '</li>'
                        })
                        //$("#tbodyId").html(str);
                        $(".lottery-list ul").html(str);
                        $("#sureId").css("display","block");
                    }else{
                        clearInterval(myNumber);
                        alert(result.msg);
                        return;
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("服务器异常")
                }
            });
        }

        $(function () {
            $(".start").click(function(){
                if($("#prize_btn").val() == 0){
                    if($("#set-grade").val() == "选择奖项") {
                        alert("请选择奖项");
                        return;
                    }else if($.trim($("#prizeCount").val()) == "" || $.trim($("#prizeCount").val()) == 0) {
                        alert("请输入中奖人数");
                        return;
                    }else if($("#prizeCount").val() > 10) {
                        alert("单次抽奖人数不能超过10人");
                        return;
                    }else{
                        $("#prize_btn").val(1);
                        var num = $("#prizeCount").val();
                        $(this).find("img").attr("src","images/prize_stop.png");
                        myNumber = setInterval(function(){
                            showRandomNum(num);
                        }, 30);
                    }
                }else{
                    $("#prize_btn").val(0);
                    clearInterval(myNumber);
                    save();
                    $(this).find("img").attr("src","images/prize_start.png");
                }
            });

            //回车键控制开始和停止
            $(document).keydown(function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && e.keyCode == 13) { // enter 键
                    $(".start").click();
                }
            });

            $("#set-grade").change(function(){
                $(".lottery-grade span").text($(this).val());
            });
        });
    </script>

    <script type="text/javascript">
        var data = null;
        function save(){
            if($(".lottery-list ul").find("li").length == 0) {
                alert("无确认名单")
                return ;
            }

            $.ajax({
                url : "/save",
                type : "post",
                data : {
                    data:JSON.stringify(data)
                },
                success : function(result) {
                    if(result.result == "success"){
                        let str = '';
                        $.each(data , function (index,e){
                            str +=  '<li>'+e.userName+'</li>';
                        })
                        //let sid = $("#awards option:selected").attr("sid");
                        let sid = $("#set-grade option:selected").attr("sid");
                        $("#id_" + sid).css("display","block");
                        $("#" + sid).prepend(str);
                    }else{
                        alert(result.msg);
                        return;
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("服务器异常")
                }
            });

        }


    </script>
</body>
</html>